<template>
	<view class="content">
		
		<view v-for="(item,i) in cardList" :key="i" class="flex vipcard">
			<view class="cardDesc flex">
				<view class="company">{{vipCardInfo.company}}</view>
				<view class="cardVipLogo">
					<u--image :src="vipCardInfo.logo" height="40rpx" width="50rpx"></u--image>
				</view>
			</view>
			<view class="cardNum">
				{{item.card_num}}
			</view>
			<view style="text-align: center;">已预约 {{item.used_count}} 次</view>
		</view>

		<view class="flex buttonView" >
			<view class="selectButton active" @click="active">去激活</view>
			<view class="selectButton buyer" @click="buyer">去购卡</view>
		</view>
		<u-empty v-if="cardList.length <= 0"
		    mode="coupon"
		    text="您还没有会员卡,快去购买吧"
		>
		</u-empty>
	</view>
</template>

<script>
	import http from '@/apis/http.js'
	export default {
		data() {
			return {
				cardList:[],
				cardCount:0,
				vipCardInfo:{},
			}
		},
		methods: {
			getCardList(){
				http.POST('user_vip/userVipCard').then(res=>{
					this.cardList = res.data
				})
			},
			buyer(){
				uni.navigateTo({
					url:'/pages/vipCard/buyVip'
				})
			},
			active(){
				uni.navigateTo({
					url:'/pages/vipCard/activeCard'
				})
			},
			getVipCardBaseInfo()
			{
				http.POST('vip_card/cardInfo').then(res=>{
					this.vipCardInfo = res.data
				})
			}
		},
		created() {
			this.getCardList()
			this.getVipCardBaseInfo()
		}
	}
</script>

<style>
	.flex{display: flex;}
	.selectButton {
		width: 80%;
		padding: 25rpx;
		background-color: green;
		margin-top: 20rpx;
		border-radius: 50rpx;
		text-align: center;
	}
	.content { padding: 20rpx;}
	.buttonView { margin-top: 150rpx; flex-direction: column; justify-content: center; align-items: center;}
	.vipcard {border:1px solid #eeeeee; box-shadow: 0 0 4rpx 3rpx #eeeeee; color: #fff; border-radius: 20rpx; flex-direction: column; padding: 35rpx 20rpx; background-color: #50bcad; margin-top: 30rpx;}
	.cardDesc { justify-content: space-between; padding: 0 40rpx;}
	.cardNum { 
		margin: 20rpx; 
		text-align:center;
		font-size: 80rpx;
	}
	.active { color: #fff; margin-bottom: 20rpx; background-color: #67b6a1;}
	.buyer { background-color: #fff; border: 1px solid #303030;}
	.company{color: #e7a54f;  font-weight: bold; font-size: 35rpx;}
</style>
